<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS优先级</title>

  <style>
    /* 选择器优先级权重 */
    /* 
      1. 继承或者*              0,0,0,0
      2. 标签选择器             0,0,0,1
      3. 类选择器，伪类选择器   0,0,1,0
      4. ID选择器               0,1,0,0
      5. 行内样式 style         1,0,0,0 
      6. !important             无穷大
    */

    /* 类与标签选择器 类的选择器要高 */
    .test {
      color: red;
    }

    div {
      /* 但是如果加上了!important 比之前的优先级都要高 */
      color: pink !important;
    }
  </style>

</head>

<body>

  <div class="test">千山鸟飞绝，万径人踪灭</div>

  <a href="#">我是一个链接</a>
  
</body>

</html>